<template>
  <div class="container grid">
    <div class="area1 itemBg">
      <div class="font f18 c-7c medium areaTitle">电箱检测报警播报</div>
      <el-carousel height="245px">
        <el-carousel-item v-for="item in 3" :key="item">
          <Area1 />
        </el-carousel-item>
      </el-carousel>
    </div>
    <div class="area2">
      <img class="containImg" src="@/assets/image/3d.jpeg" alt="" />
    </div>
    <div class="area3 itemBg">
      <div class="font f18 c-7c medium areaTitle">环境温度</div>
      <el-carousel height="245px">
        <el-carousel-item v-for="item in 3" :key="item">
          <Area3 :idInfo="'electric3Echarts' + item"/>
        </el-carousel-item>
      </el-carousel>
    </div>
    <div class="area4 itemBg">
      <div class="font f18 c-7c medium areaTitle">温度监测</div>
      <el-carousel height="245px">
        <el-carousel-item v-for="item in 3" :key="item">
          <Area4 :idInfo="'electric4Echarts' + item"/>
        </el-carousel-item>
      </el-carousel>
    </div>
    <div class="area5 itemBg">
      <div class="font f18 c-7c medium areaTitle">漏电监测</div>
      <el-carousel height="245px">
        <el-carousel-item v-for="item in 3" :key="item">
          <Area5 :idInfo="'electric5Echarts' + item"/>
        </el-carousel-item>
      </el-carousel>
    </div>
    <div class="area6 itemBg">
      <div class="font f18 c-7c medium areaTitle">近30天电箱检测累计报警统计</div>
      <Area6/>
    </div>
    <div class="area7 itemBg">
      <div class="font f18 c-7c medium areaTitle">设备监控</div>
      <Area7/>
    </div>
    <div class="area8 itemBg">
      <div class="font f18 c-7c medium areaTitle">报警信息</div>
      <Area8/>
    </div>
    <div class="area9 itemBg">
      <div class="font f18 c-7c medium areaTitle">近30天电箱报警趋势统计</div>
      <Area9/>  
    </div>
  </div>
</template>

<script>
import Area1 from "./components/electricBoxArea1.vue";
import Area3 from "./components/electricBoxArea3.vue";
import Area4 from "./components/electricBoxArea4.vue";
import Area5 from "./components/electricBoxArea5.vue";
import Area6 from "./components/electricBoxArea6.vue";
import Area7 from "./components/electricBoxArea7.vue";
import Area8 from "./components/electricBoxArea8.vue";
import Area9 from "./components/electricBoxArea9.vue";
export default {
  name: "index",
  data() {
    return {

    };
  },
  components: {
    Area1,Area3,Area4,Area5,Area6,Area9,Area7,Area8
  },
};
</script>

<style scoped lang="scss">
.container {
  width: 100%;
  padding: 0 20px;
  height: 936px;
  box-sizing: border-box;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr;
  grid-template-areas:
    "area1 area2 area2 area3"
    "area4 area2 area2 area5"
    "area6 area7 area8 area9";
  gap: 20px;
}
/*  */
.mainImg {
  height: calc(100% - 50px);
}
</style>